<template>
  <view class="bottom-nav">
    <view
      class="nav-item"
      v-for="(item, index) in filteredBottomNavs"
      :key="index"
      @click="goBottomNav(item.url, index)"
    >
      <image :src="publicStore.getCurrentTab() === index ? item.iconActive : item.icon" class="nav-icon" />
      <text :class="['nav-label', publicStore.getCurrentTab() === index ? 'active' : '']">{{ item.label }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';  // 导入 ref 和 computed
import { usePublicStore } from '../../store/public';


// 定义类型接口
interface BottomNavItem {
  icon: string;
  iconActive: string;
  label: string;
  url: string;
  requiredPermission: string[] | null;  // 可以是字符串（如 'user'）或 null（无需权限）
}

// 定义原始 bottomNavs 数组
const bottomNavs: BottomNavItem[] = [
  { icon: '/static/home.png', iconActive: '/static/home-active.png', label: '首页', url: '/pages/index/index', requiredPermission: ['工作人员','用户','管理员'] },
  { icon: '/static/order.png', iconActive: '/static/order-active.png', label: '工单', url: '/pages/order/order', requiredPermission: ['工作人员'] },
  { icon: '/static/order.png', iconActive: '/static/order-active.png', label: '修单', url: '/pages/repair-order/repair-order', requiredPermission: ['用户'] },
  { icon: '/static/check.png', iconActive: '/static/check-active.png', label: '巡检', url: '/pages/check/check', requiredPermission: ['工作人员'] },
  { icon: '/static/repair.png', iconActive: '/static/repair-active.png', label: '报修', url: '/pages/order/submit/submit', requiredPermission: ['用户'] },
  { icon: '/static/user.png', iconActive: '/static/user-active.png', label: '我的', url: '/pages/user/user', requiredPermission: ['工作人员','用户','管理员'] },
];

const publicStore = usePublicStore();


// 创建过滤后的 computed 属性
const filteredBottomNavs = computed(() => {
	
	
  return bottomNavs.filter(item => {
	  const auth = uni.getStorageSync("type") || '';
	  
    return item.requiredPermission.includes(auth);
  });
});

// goBottomNav 函数：基于原始函数重新编写
const goBottomNav = (url: string, index: number) => {
  publicStore.setCurrentTab(index);  // 更新当前标签
  uni.reLaunch({ url });  // 使用 uni.reLaunch 进行跳转
};

// onMounted(()=>{
// 	currentTab.value = publicStore.getCurrentTab();
// })
</script>

<style scoped>
.container {
  padding-bottom: 200rpx;
  background-color: #EFEFEF;
  padding-top: 185rpx;
}
.head {
  background-color: #fff;
  padding-bottom: 1rpx;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 2rpx 8rpx #eee;
}
/*顶部学校定位*/
.location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: bold;
  padding: 24rpx 24rpx 0 24rpx;
  background: #fff;
}
.location-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.icon-location {
  width: 32rpx;
  height: 30rpx;
  margin-right: 8rpx;
}
.location-text {
  color: #222;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.icon-arrow {
  width: 28rpx;
  height: 28rpx;
  margin-left: 8rpx;
  margin-top: 8rpx;
}

/*搜索栏*/
.search-row {
  display: flex;
  align-items: center;
  margin: 30rpx 24rpx 27rpx 24rpx;
}
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #F5F5F5;
  border-radius: 32rpx;
  padding: 0 0 0 20rpx;
  height: 64rpx;
  margin-right: 20rpx;
}
.icon-search {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}
.search-input {
  border: none;
  background: transparent;
  font-size: 28rpx;
  color: #969696;
}
.search-btn {
  background: #3D76FF;
  color: #fff;
  border-radius: 32rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  margin-right: 30rpx;
  height: 64rpx;
  line-height: 64rpx;
  border: none;
}
.icon-scan {
  width: 48rpx;
  height: 48rpx;
  margin-right: 10rpx;
}

/*轮播图*/
.banner-swiper {
  width: 100%;
  height: 400rpx;
  position: relative;
  z-index: 1;
}
.banner-img {
  width: 100%;
  height: 400rpx;
}

/*物业公告*/
.notice-bar {
  background: #fff;
  margin: -60rpx 30rpx 0 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  padding: 24rpx;
  position: relative;
  z-index: 2;
}
.notice-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18rpx;
}
.notice-title-left {
  display: flex;
  align-items: center;
}
.notice-main {
  font-size: 42rpx;
  font-weight: bold;
  color: #333;
}
.notice-highlight {
  font-size: 42rpx;
  font-weight: bold;
  color: #3D76FF;
  margin-left: 2rpx;
}
.notice-divider {
  color: #9A9A9A;
  margin: 0 12rpx;
  font-size: 28rpx;
  font-weight: normal;
}
.notice-update {
  color: #9A9A9A;
  font-size: 23rpx;
  font-weight: normal;
  margin-top: 10rpx;
}
.notice-more-area {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.notice-more {
  color: #9A9A9A;
  font-size: 26rpx;
  font-weight: normal;
  margin-right: 8rpx;
}
.notice-arrow-icon {
  width: 20rpx;
  height: 20rpx;
  margin-top: 5rpx;
}
.notice-list {
  margin-top: 10rpx;
}
.notice-item {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 28rpx;
  color: #333;
  background: transparent;
}
.notice-tag {
  border-radius: 8rpx;
  padding: 2rpx 16rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: #fff;
  flex-shrink: 0;
}
.notice-tag.urgent {
  background: #ff4d4f;
}
.notice-tag.normal {
  background: #faad14;
}
.notice-content {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}

/*功能服务*/
.service-section {
  background: #fff;
  margin: 20rpx 30rpx 0 30rpx;
  border-radius: 16rpx;
  padding: 24rpx 0 24rpx 0;
}
.service-title {
  font-size: 42rpx;
  font-weight: bold;
  margin-left: 15rpx;
  padding: 20rpx;
  color: #333;
}
.service-grid {
  margin-top: 15rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 26rpx;
}
.service-icon {
  width: 110rpx;
  height: 110rpx;
  background: #f2f3f5;
  border-radius: 50%;
}
.service-label {
  font-size: 27rpx;
  color: #000;
}

/*底部导航*/
.bottom-nav {
  position: fixed;
  bottom: 0;
  padding-bottom: 10rpx;
  width: 100%;
  height: 130rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx #eee;
  z-index: 555;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-icon {
  width: 50rpx;
  height: 50rpx;
}
.nav-label {
  font-size: 26rpx;
  color: #000;
  margin-top: 4rpx;
}
.nav-label.active {
  color: #3D76FF;
}
</style>